<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread" id="gas-price-form">
        <!-- <p class="bg-info text-center" style="padding: 8px;">气价信息</p> -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">气价信息</a></li>
        </ul>
        <div class="form-group">
          <label for="f_user_type"  class=" col-sm-2 control-label">用户类型</label>
          <div class="col-sm-3" id="f_user_type">
            <v-select id="f_user_type"
              v-model="model.f_user_type"
              placeholder='请选择'
              :value.sync="model.f_user_type"
              :options='usertype'
              close-on-select>
            </v-select>
          </div>
          <label for="f_gasproperties"  class=" col-sm-2 control-label">用气性质</label>
          <div class="col-sm-3">
            <v-select id="f_gasproperties"
              v-model="model.f_gasproperties"
              placeholder='请选择'
              :value.sync="model.f_gasproperties"
              :options='gastype'
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="form-group">
          <label for="f_price_type"  class=" col-sm-2 control-label">气价类型</label>
          <div class="col-sm-3" id="choose">
            <v-select id="f_price_type"
              v-model="model.f_price_type"
              placeholder='请选择'
              :value.sync="model.f_price_type"
              :options='pricetype'
              close-on-select>
            </v-select>
          </div>
          <div :class="[$v.f_price_name.required ? 'has-error' : 'has-success']">
            <label for="f_price_name"  class=" col-sm-2 control-label">气价名称</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_price_name"
               v-validate:f_price_name='{required: true }'  placeholder="气价名称">
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="f_stairmonths" class=" col-sm-2 control-label">阶段月数</label>
          <div class="col-sm-3">
            <input class="form-control" type="number" v-model="model.f_stairmonths"
            v-validate:f_stairmonths='{dctest: [ 12, "<=" ] }'>
            <span v-if="$v.f_stairmonths.dctest" style="color:red ">阶段月数不能大于12</span>
          </div>
          <label for="f_perform_date"  class=" col-sm-2 control-label">生效日期</label>
          <div class="col-sm-3">
            <datepicker id="f_perform_date"
              placeholder="生效日期"
              v-model="model.f_perform_date"
              :value.sync="model.f_perform_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              width="100%">
            </datepicker>
          </div>
          <span id="helpBlock" class="help-block">本年或本月1号</span>
        </div>
      </form>
       <div class="span" style="margin-top:6px; flex: 1;height: auto;">
        <unit-price v-if="unitshow" :unitmodel.sync='model.detailprice'></unit-price>
        <mix-price v-if="mixshow" :mixmodel.sync='model.detailprice'></mix-price>
        <stair-price v-if="stairshow" :stairmodel.sync='model.detailprice'></stair-price>
      </div>
      <div style="text-align:right;height:auto;margin-top:6px;margin-right:50px;">
        <button class="btn btn-success width-60" @click="confirm()"  :disabled='!$v.valid' id="comprehen-staPri-gasPri-确认">确认
        </button>
        <button class="btn btn-default width-60" @click="clear()" id="comprehen-staPri-gasPri-取消">取消
        </button>
      </div>
    </validator>
  </div>
</template>
<script>
/**
*阶梯气价管理组件
*/

import AppData from '../../../../stores/AppData'
// import * as Util from '../../../components/Util'
export default {
  data () {
    return {
      unitshow: true,
      mixshow: false,
      stairshow: false,
      model: {
        f_user_type: [''],
        f_gasproperties: [''],
        f_price_type: ['固定气价'],
        f_stairmonths: 1,
        f_perform_date: '',
        detailprice: []
      }
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.model = Object.assign({}, this.model, val)
      this.model.f_price_type = [this.model.f_price_type]
      this.model.f_user_type = [this.model.f_user_type]
      this.model.f_gasproperties = [this.model.f_gasproperties]
      this.model.f_price_name = val.f_price_name
      this.model.f_stairmonths = val.f_stairmonths
      this.id = val.id
      let tablename = 't_detailprice'
      let condition = 'f_stairprice_id=' + "'" + this.id + "'"
      this.$SqlService.singleTable(tablename, condition)
      .then(
        (res) => {
          this.model.detailprice = res.data
        }
      )
    },
    'model.f_price_type' (val) {
      if (val[0] === '固定气价') {
        this.model.detailprice = []
        this.unitshow = true
        this.mixshow = false
        this.stairshow = false
      } else if (val[0] === '混合气价') {
        this.model.detailprice = []
        this.unitshow = false
        this.mixshow = true
        this.stairshow = false
      } else if (val[0] === '阶梯气价') {
        this.model.detailprice = [{f_gas: '', f_price: ''}]
        this.unitshow = false
        this.mixshow = false
        this.stairshow = true
      }
    }
  },
  ready () {
    this.model = Object.assign({}, this.model, this.data)
  },
  methods: {
    confirm () {
      // 去除重复或者空的明细
      if (this.model.f_price_type[0] === '阶梯气价') {
        this.removeDuplication(this.model)
      }
      this.$LogicService.gasPrice(this.model, this.data).then((res) => {
        this.$dispatch('success', '气价管理', this.data, res)
      }).catch((error) => {
        this.$dispatch('error', '气价管理', this.data, error)
      })
      this.initModel()
    },
    initModel () {
      this.model = {
        f_user_type: [''],
        f_gasproperties: [''],
        f_price_type: ['固定气价'],
        f_stairmonths: 1,
        f_perform_date: '',
        detailprice: []
      }
    },
    removeDuplication (val) {
      if (val.detailprice.length > 0) {
        let hash = []
        let arr = []
        for (var i = 0; i < val.detailprice.length; i++) {
          // hash[val.detailprice[i].f_gas] != null
          if (!val.detailprice[i].f_gas) {
            continue
          }
          if (!hash[val.detailprice[i].f_gas]) {
            arr.push(val.detailprice[i])
            hash[val.detailprice[i].f_gas] = true
          }
        }
        val.detailprice = arr
      }
    }
  },
  computed: {
    usertype () {
      return AppData.getParam('用户类型')
    },
    gastype () {
      return AppData.getParam('用气性质')
    },
    pricetype () {
      return AppData.getParam('气价类型')
    }
  }
}
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
